<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Home = {
				template: '<div>home</div>',
			}
			let Login = {
				template: '<div>Login</div>',
			}
			let Register = {
				template: '<div>Register</div>',
			}
			let App = {
				template: `<div><button type="button" @click="testDynamicCom">点击测试动态组件</button>
					<component :is="currentCom"></component></div>`,
				data(){
					return {
						index: 0,
						currentCom: 'Home',
						comList: ['Home', 'Login', 'Register'],
					}
				},
				components: {Home, Login, Register},
				methods: {
					testDynamicCom(){
						this.index ++
						if(this.index > 2){
							this.index = 0
						}
						this.currentCom = this.comList[this.index]
						
					}
				}
			}
			
			let vm = new Vue({
				el: '#app',
				data(){
					return {
						
					}
				},
				components: {
					App,
				},
			})
		</script>
	</body>
</html>
